<template>
    <div>
        <tool-bar nav="" title='linux-desktop'></tool-bar>

        <kv label="名称">
            <el-input v-model="info.name" chk="*"></el-input>
        </kv>
        <kv label="中文名称">
            <el-input v-model="info.cn_name"></el-input>
        </kv>
        <kv label="分类">
            <selector :data="$data.categories" multi v-model="info.categories"></selector>
        </kv>
        <kv label="备注">
            <el-input v-model="info.remark"></el-input>
        </kv>
        <kv label="执行器">
            <selector :data="$data.moniqi" v-model="info.moniqi" clearable></selector>
            <div v-if="info.moniqi.includes('wine')">
              运行wine时，先指向一个 .sh 脚本，sh脚本有如下内容，这样程序就能识别正确的环境，加载系统字体了：<br />
              env WINEPREFIX="$HOME/.wine"<br />
              deepin-wine8-stable  /path/xxx.exe
            </div>
        </kv>
        <kv label="程序">
            <el-input v-model="info.exec" chk="*"></el-input>
        </kv>
        <kv><template #k>
            <div class="k">图标
                <remark>绝对位置 或从 /usr/share/icons/hicolor/32x32/apps 路径下查找.png 文件</remark>
            </div></template>
            <el-input v-model="info.icon"></el-input>
        </kv>
        <kv label="转换">
            <el-button type="primary" @click="toText">生成 ⤵</el-button>
        </kv>

        <kv label="desktop文件内容" v-if="$data.result">
            <el-input readonly type="textarea" v-model="$data.result" autosize></el-input>
        </kv>

    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
    name: "linux-desktop",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive( {
    info: {
        moniqi:"shell"
    },
    categories: {
        System: '系统', Accessories: '辅助', Office: '办公', Education: '教育',
        Game: "游戏", Graphics: "图像", Network: "网络",
        Programming: "开发", "Sound & Video": "音视频"
    },
    moniqi: ["wine", "deepin-wine(x)-stable","shell"],
    result: ""
});
const info = $computed(()=> $data.info );

const $props = defineProps({
    id: { type: String } ,
    action: { type: String }
});

const action_name = $computed(()=>{
    return {add: "添加", edit: "修改"}[$props.action]
});

const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

const toText = function() {
    if (jv.chk_main($data) == false) {
        return;
    }

    var exec = "";
    if($data.info.moniqi && ($data.info.moniqi != "shell")){
      exec = $data.info.moniqi + " "
    }

    var template = `[Desktop Entry]
Categories=${$data.info.categories};
Type=Application
Name=${$data.info.name}
Name[zh_CN]=${$data.info.cn_name || $data.info.name}
Comment=${$data.info.remark || $data.info.cn_name || $data.info.name}
Exec=${exec} ${$data.info.exec} %f
Icon=${$data.info.icon || ""}
Terminal=false`;
    $data.result = template;
    jv.$saveData("info",$data.info);
};

onMounted(function() {
    jv.$loadData("info", v=> $data.info = v );
});

</script>

<style lang="scss" scoped>

::v-deep(.kv > .k) {
    flex: 1;
}

::v-deep(.kv > .v > :first-child) {
    max-width: unset;
}

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;


    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        height: 100%;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;
    height: 100%;


    button {
        display: block;
        margin: 10px 6px;
    }

}
</style>